<template>
	<div style="display: flex;flex-direction: column;height:100%">
		<div style="flex: 3;">
			<el-input style="width: 260px;margin-top: 10px;" placeholder="请输入公告标题" v-model="searchValue.input">
				<template #append><el-button :icon="Search" @click="search()" /></template>
			</el-input>
      <el-table
          :data="tableData.records" border
          style="width: 100%;margin-top:12px"
          class="orange-table-header"
      >
				<el-table-column label="通知公告" align="center">
			    <el-table-column prop="message.createTime" label="发布时间" align="center" width="250" >
			    </el-table-column>
				<el-table-column prop="message.title" label="公告标题" align="center" show-overflow-tooltip>
				</el-table-column>
			    <el-table-column label="message.发布人" align="center" width="150">管理员
			    </el-table-column>
				<el-table-column prop="message.view" label="浏览量" align="center" width="100">
				</el-table-column>
				<el-table-column prop="panduan" label="是否查看" align="center" width="100"
                         :filters="[
                             { text: '待查看', value: true },
                             { text: '已查看', value: false }
                             ]"
                         column-key="panduan"
                         :filter-method="filterPanduan"
                        >
					<template #default="scope">
					    <el-tag type="danger" v-if="scope.row.panduan==true">待查看</el-tag>
					    <el-tag type="success" v-else>已查看</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="170" align="center">
				<template #default="scope">
				<el-button type="primary" size="small" plain @click="detail(scope.row.message.id),save(scope.row.message.id)">
					查看详情
				</el-button>
				</template>
				</el-table-column>
				</el-table-column>
			</el-table>
			<el-drawer
			    v-model="drawer.visible"
			    title="公告详情"
			    :direction="direction"
				@close="handleDrawerClose()">
			    {{ drawer.content }}
			  </el-drawer>
		</div>
		 <div style="flex: 1;">
			 <el-pagination
			 background
			 :page-count="tableData.pages"
			 v-model:current-page="params.page"
			 :total="tableData.total"
			 :close-on-click-modal="false"
			 @current-change="getTableData()"
			 style="margin-top:15px;"></el-pagination>
		 </div>

	</div>
</template>


<script setup lang="ts">
	import { ref } from 'vue'
	import type { DrawerProps } from 'element-plus'
	import { reactive } from 'vue'
	import { get, post } from '@/plugins/axios'
	import { getCookieForObject} from '@/util'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { Search } from '@element-plus/icons-vue'
	import {_axios} from '@/plugins/axios'
	const searchValue=reactive({input:''})

	const tableData=reactive({
		records:[	],
		pages: 0,
		total: 0
	})
	const params = reactive({
	    page: 1,
	    limit: 10
	})
	const drawer = reactive({
		id:'',
		content:'',
		view:'',
		visible:false
	})
	const direction = ref<DrawerProps['direction']>('rtl')
	function getUserId(){
		const userinfo= getCookieForObject('user')
	    return userinfo.id
	}
	const userId=getUserId()
function save(accid){
	post('/tPageview/add',{noticeId:accid,userId:userId},content=>{
		//getTableData()
		getTableData()

		//window.location.reload()
		console.dir(tableData.records)
	})
}
getTableData()
function getTableData(){
	post('/notice/llist',{pageNo:params.page, pageSize:params.limit },content=>{
		console.dir(content)
		for(const key in content.records){

			tableData.records=[]
					tableData.records.push({"message":null,"panduan":null})

			console.dir(tableData.records)
		}

			for(const key in content.records){
				const panduans=ref(false)
				tableData.records=[]
					post('/tPageview/panduan',{userId:userId,noticeId:content.records[key].id},ref=>{
						console.dir(ref)
						if(ref){
							panduans.value=true
						}
						else{
							panduans.value=false
						}
						tableData.records[key]={"message":content.records[key],"panduan":panduans}
					})
				console.dir(tableData.records)
			}
		    tableData.pages = content.pages
		    tableData.total = content.total

			})

	}

	function detail(id)
	{
		_axios.get('/notice/detail',{params :{id:id}}).then(response => {
		    drawer.visible = true;
		    drawer.content = response.data;
		  }).catch(error => {
		    console.error('获取公告详情失败:', error);

		  });
	}
	//getTableData()

function search(){
	params.page=1
	params.limit=10
	post('/notice/search',{input:searchValue.input,pageNo:params.page, pageSize:params.limit},content=>{
			console.log(content)
		// tableData.records = content
		// console.dir(tableData)
		for(const key in content.records){
			tableData.records=[]
					tableData.records.push({"message":null,"panduan":null})

			console.dir(tableData.records)
		}

			for(const key in content.records){
				const panduans=ref(false)
				tableData.records=[]
					post('/tPageview/panduan',{userId:userId,noticeId:content.records[key].id},ref=>{
						console.dir(ref)
						if(ref){
							panduans.value=true
						}
						else{
							panduans.value=false
						}
						tableData.records[key]={"message":content.records[key],"panduan":panduans}
					})
				console.dir(tableData.records)
			}
		    tableData.pages = content.pages
		    tableData.total = content.total

			})

}
  function filterPanduan(value, row) {
    return row.panduan === value;
  }
function handleDrawerClose() {
		ElMessage({
			message: '公告已关闭',
			type: 'success',
			duration: 2000
		});
	}


</script>

<style scoped lang="scss">
</style>